<template>
    <div class="Calendarbox">
        <div class="Calendarbox-left">
            <div class="Calendarbox-left-top">
                <CalendarTop :month="month" :year="year" @ChiArrowevent="Arrowevent" />
            </div>
            <div class="Calendarbox-left-con">
                <CalenDar :month="month" :year="year" :boolean="true" @CalendarMemorialClick="MemorialClick" />
            </div>
        </div>
        <div class="Calendarbox-right">
            <CalendarRight @RightMemorialClick="MemorialClick" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
// 日历组件
import CalenDar from '../Calendar/CalenDar.vue';
// 头部组件
import CalendarTop from './Top/CalendarTop.vue';
// 右侧组件
import CalendarRight from './Right/CalendarRight.vue';
import { useRouter } from 'vue-router';
const Router = useRouter();
let now = new Date();
// 创建一个响应式对象，用于存储当前时间
const timeObj = reactive({
    // 获取当前年份
    year: +now.getFullYear(),
    // 获取当前月份，并将其转换为数字
    month: +now.getMonth() + 1
});
const { year, month } = toRefs(timeObj);

// 定义一个函数，用于控制时间
const Arrowevent = (type?: string, years?: number) => {
    // 根据type参数的不同值，进行不同的操作
    switch (type) {
        // 如果type的值为recoil，则将月份减1，年份减1
        case 'recoil':
            if (month.value <= 1) {
                year.value--;
                month.value = 12;
            } else {
                month.value--;
            }
            break;

        // 如果type的值为advance，则将月份加1，年份加1
        case 'advance':
            if (month.value >= 12) {
                year.value++;
                month.value = 1;
            } else {
                month.value++;
            }
            break;

        // 如果type的值为initialize，则将月份设置为当前月份，年份设置为当前年份
        case 'initialize':
            month.value = now.getMonth() + 1;
            year.value = now.getFullYear();
            break;

        // 如果type的值为select，则将年份设置为传入的参数
        case 'select':
            year.value = years as number;
            break;
        default:
            break;
    }
};

// 定义一个函数，用于处理点击事件
const MemorialClick = (type: string | any) => {
    // 打印出传入的参数
    Router.push({ name: '更多', params: type });
};


</script>

<style scoped lang="scss">
.Calendarbox {
    width: 980px;
    height: 500px;
    border-radius: 10px;
    display: flex;
    position: absolute;
    z-index: 666;
    top: 80px;
    right: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    background: #fff;

    .Calendarbox-left {
        width: 80%;
        height: 100%;


        .Calendarbox-left-top {
            width: 100%;
            height: 13%;
        }

        .Calendarbox-left-con {
            width: 100%;
            height: 87%;
            display: flex;
            overflow: hidden;
            overflow: scroll;
        }

        .Calendarbox-left-con::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .Calendarbox-left-con::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background: #fff;
            box-shadow: inset 0 0 5px #ccc;
        }

        //滚动条底层颜色!
        .Calendarbox-left-con::-webkit-scrollbar-track {
            border-radius: 10px;
            background: #fff;

            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px #fff;
        }

    }

    .Calendarbox-right {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }

    .Calendarbox-right::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .Calendarbox-right::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background: #fff;
        box-shadow: inset 0 0 5px #ccc;
    }

    //滚动条底层颜色!
    .Calendarbox-right::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #fff;

        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px #fff;
    }
}
</style>